<script type="text/javascript">
{literal}
	$(document).ready(function() {
		$('#list').tablesorter();
		$('#list tbody tr:even').toggleClass('alt');
	});	
{/literal}
</script>
<br />
<div id="test_container" style="margin-top: 5px">
	<table id="list" cellspacing="0" cellpadding="0" class="grid" width="500px">
		<thead>
			<tr>
				<th class='first'>{translate}Career{/translate}</th>
				<th>{translate}Code{/translate}</th>
				<th>{translate}Status_1{/translate}</th>
				<th class='last'>{translate}Delete{/translate}</th>	
			</tr>
		</thead>
		<tbody>

		{foreach from=$list item=item}
			<tr id="{$item.id}">
			    
			    <td class='first'>
			        <a href="javascript:Edit({$item.id});" title="{translate}Edit career{/translate}">{$item.name}</a>
			    </td>
			    <td>
			        {$item.auto_suggest_code}
			    </td>
			    {if $item.disable == 0 }
			    <td><span>{translate}In Use{/translate}</span></td>
                <td class='last'>
                    <a class="btn" href="javascript:changeStatus({$item.id},'lock');" 
                        title="{translate}Delete career{/translate}"> 
                        <img src="../images/lock_small.png" alt="{translate}Temporary delete{/translate}"></img>
                    </a>
                </td>
                
                {else if $item.disable == 1}
                <td><span class="impression">{translate}Temporary delete{/translate}</span></td>
                <td class='last'>
                    <a class="btn" href="javascript:changeStatus({$item.id},'unlock');" 
                        title="{translate}Reuse career name{/translate}"> 
                        <img src="../images/unlock_small.png" alt="{translate}Reuse{/translate}"></img>
                    </a>
                </td>
                {/if}

			</tr>
		{/foreach}
		</tbody>
	</table>		
</div>